<script setup>
import { ref } from "vue";
import Taro, { getCurrentPages } from "@tarojs/taro";
import { navigator } from "@tarojs/runtime";

import Page from "@/components/common/Page.vue";
import ByButton from "@/components/ui/ByButton.vue";
import ByCheckbox from "@/components/ui/ByCheckbox.vue";

import ApiUser from "@/api/user";
import { getUserInfo } from "@/api/login";
import useFetch from "@/hooks/useFetch";
import useStorage from "@/hooks/useStorage";

import { ACCESSEXPIRE, ACCESSTOKEN, XP_OPENID } from "@/utils/constant";

const storageToken = useStorage(ACCESSTOKEN);
const storageExpire = useStorage(ACCESSEXPIRE);

function goback() {
  const pages = getCurrentPages();
  if (pages.length === 1) {
    Taro.reLaunch({ url: "/pages/index/index" });
  } else {
    Taro.navigateBack({ delta: 1 });
  }
}

const { run } = useFetch(
  ApiUser.authLoginyByPhone,
  {
    immediate: false,
    async onSuccess(res) {
      storageToken.value = res.accessToken;
      storageExpire.value = res.accessExpire;

      // 登录成功，
      const userInfo = await getUserInfo();

      if (!userInfo?.avatar) {
        const { confirm } = await Taro.showModal({
          title: "更新个人资料",
          content: "建议您直接使用微信头像和昵称",
          confirmText: "去更新",
          cancelText: "暂不更新",
        });

        if (confirm) {
          Taro.redirectTo({ url: "/packageMine/pages/info/index" });
          return;
        }
      }

      goback();
    },
  },
  { token: false }
);

const handleGetPhonenumber = (e) => {
  // console.log(e, {
  //   open_id: Taro.getStorageSync(XP_OPENID),
  //   phoneCode: e.detail.code,
  // });

  run({
    open_id: Taro.getStorageSync(XP_OPENID),
    phoneCode: e.detail.code,
  });
};

// 是否勾选
const agreement = ref(false);
// 判断是否勾选
const checkAgreement = () => {
  if (!agreement.value) {
    Taro.showToast({
      icon: "none",
      title: "您需阅读并同意《服务协议》和《隐私政策》",
    });
  }
};
</script>

<template>
  <Page height="440rpx">
    <view class="pt-[340px] text-center">
      <image src="/static/images/logo.png" class="w-[200px]" mode="widthFix" />
      <view>吃的嘉年华</view>
    </view>

    <view class="fixed bottom-0 text-center w-full">
      <ByButton
        class="w-[612px] bg-dark"
        :open-type="agreement ? 'getPhoneNumber' : undefined"
        @getphonenumber="handleGetPhonenumber"
        @tap="checkAgreement"
        >手机号一键授权
      </ByButton>

      <view class="mt-3 py-3">
        <ByCheckbox class="text-dark text-sm" v-model="agreement">
          <view class="flex ml-1">
            <text>我已阅读并同意</text>
            <navigator
              class="underline"
              url="/packageMain/pages/text/index?type=1"
              @tap.stop
              >吃的嘉年华服务协议
            </navigator>
            及
            <navigator
              class="underline"
              url="/packageMain/pages/text/index?type=2"
              @tap.stop
              >隐私政策
            </navigator>
          </view>
        </ByCheckbox>

        <view class="flex-center py-6 text-center">
          <navigator
            class="text-xs text-second"
            open-type="navigateBack"
            hover-class="none"
            >暂不授权</navigator
          >
        </view>

        <view class="safe-footer" />
      </view>
    </view>
  </Page>
</template>
